// 动态主题颜色变量（使用CSS变量）
$primary-color: var(--color-primary-500);
$primary-dark: var(--color-primary-600);
$primary-light: var(--color-primary-400);

$secondary-color: var(--color-secondary-500);
$secondary-dark: var(--color-secondary-600);
$secondary-light: var(--color-secondary-400);

$success-color: var(--color-success);
$warning-color: var(--color-warning);
$error-color: var(--color-error);
$info-color: var(--color-info);

$text-primary: var(--color-text-primary);
$text-secondary: var(--color-text-secondary);
$text-muted: var(--color-text-muted);

$bg-primary: var(--color-bg-primary);
$bg-secondary: var(--color-bg-secondary);
$bg-tertiary: var(--color-bg-tertiary);

$border-color: var(--color-border-default);
$border-light: var(--color-border-light);

// 间距变量
$spacing-xs: 0.25rem;
$spacing-sm: 0.5rem;
$spacing-md: 1rem;
$spacing-lg: 1.5rem;
$spacing-xl: 2rem;
$spacing-2xl: 3rem;

// 圆角变量
$radius-sm: 0.375rem;
$radius-md: 0.5rem;
$radius-lg: 0.75rem;
$radius-xl: 1rem;

// 阴影变量
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

// 断点变量
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;

// 窄菜单变量
$narrow-sidebar-width: 4rem; // 64px
$narrow-sidebar-width-sm: 3rem; // 48px